<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px
        }

        #box {
            width: 500px;
            margin: 100px auto
        }

        table,
        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse
        }

        td,
        th {
            width: 100px;
            height: 30px;
            padding: 10px
        }

        input[type="text"] {
            display: none;
            height: 24px;
            width: 60px;
            border: 1px solid #ccc;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        tfoot td {
            text-align: right;
        }

        .editBtn {
            color: #666
        }

        .delBtn {
            color: red
        }

        .okBtn,
        .cancelBtn {
            display: none
        }

        .edit span {
            display: none
        }

        .edit input[type="text"] {
            display: inline-block
        }

        .edit .editBtn,
        .edit .delBtn {
            display: none
        }

        .edit .okBtn,
        .edit .cancelBtn {
            display: inline
        }
    </style>



</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck" class="allCheck" /></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a
                            href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        class fn {
            constructor() {
                this.allCheck = document.querySelector('.allCheck')
                this.checks = document.querySelectorAll('.check')
                this.editBtns = document.querySelectorAll('.editBtn')
                this.okBtns = document.querySelectorAll('.okBtn')
                this.cancelBtns = document.querySelectorAll('.cancelBtn ')
                this.delBtns = document.querySelectorAll('.delBtn ')
                this.num = 0
                this.allBtnOn()

            }
            //调用所有的按钮
            allBtnOn() {
                this.editBtnOn()
                this.okBtnOn()
                this.cancelBtnOn()
                this.delBtnOn()
                this.allCheckOn()
                this.checksOn()
            }
            //这里只是做编辑
            editBtnOn() {

                Array.from(this.editBtns).forEach((btn) => {
                    btn.onclick = () => {
                        var tr = btn.parentNode.parentNode
                        tr.classList.add('edit')
                        var spans = tr.querySelectorAll('span')
                        Array.from(spans).forEach((span) => {
                            span.nextElementSibling.value = span.innerHTML
                        })
                    }
                })

            }
            //这里只做 确认
            okBtnOn() {
                Array.from(this.okBtns).forEach((btn) => {
                    btn.onclick = () => {
                        var tr = btn.parentNode.parentNode
                        tr.classList.remove('edit')
                        var spans = tr.querySelectorAll('span')
                        Array.from(spans).forEach((span) => {
                            span.innerHTML = span.nextElementSibling.value
                        })
                    }
                })

            }
            // 这里只做 取消
            cancelBtnOn() {
                Array.from(this.cancelBtns).forEach((btn) => {
                    btn.onclick = () => {
                        var tr = btn.parentNode.parentNode
                        tr.classList.remove('edit')

                    }
                })
            }
            //  这里只做删除 
            delBtnOn() {

                Array.from(this.delBtns).forEach((btn) => {
                    btn.onclick = () => {
                        var tr = btn.parentNode.parentNode
                        if (confirm('Are you sure')) {
                            tr.remove()
                        }
                        this.newCheckOn()
                    }
                })
            }
            // 删除后做新选择
           newCheckOn () {
 
                        this.num = 0
                        this.checks = document.querySelectorAll('.check')
                        Array.from(this.checks).forEach((check) => {
                            if (check.checked) this.num++
                            allCheck.checked = this.num === this.checks.length;
                            totalValue()

                        })


            }
            //这里只做全选判定
            allCheckOn() {

                allCheck.onchange = () => {


                    Array.from(this.checks).forEach((check) => {
                        check.checked = this.allCheck.checked

                    })
                    this.num = this.allCheck.checked ? this.checks.length : 0
                    totalValue()
                }

            }
            // 这里只做单选按钮
            checksOn() {


                Array.from(this.checks).forEach((check) => {
                    check.onchange = () => {

                        check.checked ? this.num++ : this.num--
                        this.allCheck.checked = this.num === this.checks.length
                        totalValue()

                    }
                })
            }
        }
        //  计算每得到一行所获取的值，并且计算总价
        function totalValue() {
            var n = 0
            var checks = document.querySelectorAll('.check')
            var money = document.querySelector('#money')
            for (var i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    var tr = checks[i].parentNode.parentNode
                    var unitPrice = tr.children[2].children[0].innerHTML
                    var amount = tr.children[3].children[0].innerHTML


                    n += unitPrice * amount

                }

            }
            money.innerHTML = n
        }


        new fn()
    </script>
</body>

</html>